import React from 'react'
import { List, InputItem, Button, WhiteSpace, Icon } from 'antd-mobile'
import './index.less'
import PropTypes from 'prop-types';
import {getUrlParams} from 'UTIL/commonUtil';
import CommonHeader from 'COMPONENT/CommonHeader';
// ========================================
class Deposit extends React.Component {
	static contextTypes = {
        router: PropTypes.object.isRequired
    }
    constructor (props) {
        super(props);
        this.state = {
            ctype: ''
        };
    }
    componentWillMount () {
        let urlParams = getUrlParams();
        // console.log('urlParams:', urlParams, urlParams['ctype']);
        let ctype = urlParams['ctype'];
        if (!ctype) {
            this.setState({
                ctype: ''
            });
        } else {
            this.setState({
                ctype: ctype
            });
        }
    }
    
    goPay=()=> {
    	this.context.router.push({
			pathname: '/ViewOrder/PayMoney'
		})
    }
    
    agreement=()=> {
    	this.context.router.push({
			pathname: '/ViewOrder/Agreement'
		})
    }
    render() {
        let inputs = [
            { title: '房源', txt: '运通花园', name: 'house' },
            { title: '租房人姓名', txt: '张三', name: 'varname' },
            { title: '租房人证件号码', txt: '3120398893****0983', name: 'idcard' },
            { title: '租期', txt: '1年', name: 'daterange' },
            { title: '起租日', txt: '2018-03-09', name: 'satrtdate' },
            { title: '付款周期', txt: '一月一付', name: 'moneyrange' },
            { title: '付款日', txt: '每月10号', name: 'moneydate' },
            { title: '租金（月）', txt: '2300元/月', name: 'rentmonth' },
            { title: '租金（合计）', txt: '27,600元', name: 'renttotal' },
            { title: '定金', txt: '3,000元', name: 'deposit' }
        ];
        let payArr = [
            { title: '已支付金额', txt: '4,000元', name: 'paytotal' },
            { title: '本次支付金额', txt: '4,000元', name: 'paytime' }
        ];
        let inputArr = [];
        if (!this.state.ctype) {
            inputArr = inputs;
        } else {
            inputArr = inputArr.concat(inputs, payArr);
        }
        return (
            <div id="deposit">
                <CommonHeader
                    name='信息填写'
                    leftContentTitle="@back"
                />
                <div style={{paddingTop: '45px'}}></div>
                <List>
                    {
                        inputArr.map((item) => {
                            if (item.name === 'deposit' && this.state.ctype) {
                                return (
                                    <div style={{position: 'relative'}}>
                                        <InputItem editable={false} placeholder={item.title}
                                                   value={item.txt}>
                                            {item.title}：
                                        </InputItem>
                                        <span style={{position: 'absolute', top: '18px', right: '50px', color: '#108ee9', display: 'flex'}}>
                                            <Icon type="check" />
                                            已支付
                                        </span>
                                    </div>
                                )
                            } else {
                                return (
                                    <InputItem editable={false} placeholder={item.title}
                                               value={item.txt}>
                                        {item.title}：
                                    </InputItem>
                                )
                            }
                        })
                    }
                </List>
                {
                    !this.state.ctype ?
                        (
                            <div>
                                <WhiteSpace size="lg" />
                                <div className="btnGroup-two">
                                    <Button type="primary" inline className="btnGroup-two-btn"  >查看租约协议</Button>
                                    <Button type="primary" inline className="btnGroup-two-btn" onClick={this.goPay} >定金支付</Button>
                                </div>
                            </div>
                        )
                        :
                        (
                            <div>
                                <WhiteSpace size="lg" />
                                <div className="btnGroup-one">
                                    <Button type="primary" className="btnGroup-one-btn" onClick={this.goPay} >租金支付</Button>
                                </div>
                            </div>
                        )
                }
            </div>
        );
    }
}
// ========================================
export default Deposit;